<template>
    <div class="container">
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <!--<el-form-item label="用户名" prop="mobile">-->
                <!--<el-input v-model.number="ruleForm2.mobile"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="旧密码" prop="oldPwd">
                <el-input type="password" v-model="ruleForm2.oldPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input type="password" v-model="ruleForm2.newPwd"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm2')">确认修改</el-button>
                <el-button @click="resetForm('ruleForm2')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import md5 from 'md5'
    export default {
        data() {
            var checkMobile = (rule, value, callback) => {
                if (!value){
                    callback(new Error('请输入用户名'))
                } else {
                    callback()
                }
            };
            var oldPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm2.newPwd !== '') {
                        this.$refs.ruleForm2.validateField('newPwd');
                    }
                    callback();
                }
            };
            var newPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value == this.ruleForm2.oldPwd) {
                    callback(new Error('两次输入密码不能一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm2: {
                    oldPwd: '',
                    newPwd: '',
                    mobile: ''
                },
                rules2: {
                    oldPwd: [
                        { validator: oldPwd, trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
                    newPwd: [
                        { validator: newPwd, trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
                    // mobile: [
                    //     { validator: checkMobile, trigger: 'blur' }
                    // ]
                }
            };
        },
        methods: {
            isvalidPhone(str) {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                return reg.test(str)
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // this.ruleForm2.oldPwd = md5(this.ruleForm2.oldPwd)
                        // this.ruleForm2.newPwd = md5(this.ruleForm2.newPwd)
                        this.config.post3('/admin/main/changePwd', {
                            oldPwd: this.ruleForm2.oldPwd,
                            newPwd: this.ruleForm2.newPwd,
                        }).then(res=>{
                            if(res.data.code==='0'){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.$emit('done', '');
                                this.$router.push('/login');
                            }else {
                                this.$message.error(this.config.handleError(res.data));
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$message('已取消修改密码');
                this.$emit('done', '');
            }
        }
    }
</script>
